// eslint-disable-next-line
<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">

        <el-dialog title="切换区域" :visible.sync="open" width="500px" append-to-body
                   @close="cancel">
          <el-form ref="form" label-width="60px" style="height: 120px;">
            <el-form-item label="县区">
              <el-select
                clearable
                v-model="city"
                placeholder="请选择"
                size="small"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in this.cityData"
                  :key="item.deptCode"
                  :label="item.deptName"
                  :value="item.deptCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 看板头部 -->
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;"/>
            <div class="title">
              <el-tooltip v-show="isShow" class="item" effect="dark" content="点击切换区域" placement="left-start">
                <span @click="chooseArea()" class="title-text">大数据可视化平台</span>
              </el-tooltip>
              <span v-show="!isShow" class="title-text">大数据可视化平台</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
        </div>

        <div class="body-box">

          <!-- 左边主体 -->
          <div class="left-box">
            <div class="panel">
              <centerLeft1 :tgdata="tqqkStatiss" :fatherMethod="submit"/>
              <div class="panel-under"></div>
            </div>
            <div class="panel">
              <!--              附着物统计图-->
              <pie :fzwdata="cropsStatiss" :fatherMethod="submit"/>
              <div class="panel-under"></div>
            </div>
          </div>

          <!-- 中间主体 -->
          <div class="center-box">

            <!-- 中间头部 退耕人数统计 退耕面积等-->
            <div class="center-hd">
              <ul style="font-family: 'DIGITALDREAMFAT';font-size: 0.225rem;color:#fff;margin:auto 0">
                <!--              <ul style="font-family: 'DIGITALDREAMFAT';font-size: 10px;color:#fff;margin:auto 0">-->
                <li v-for="(item,index) in numberData" :key="index">{{ item.text }}</li>
              </ul>
              <ul style="font-size: 0.225rem;color:#fff;margin:auto 0">
                <li v-for="(item,index) in numberData" :key="index">
                  <span v-if="index==0||index==1" style="color: #3de7c9">{{ item.number.number[0] }}</span>
                  <span v-else-if="index==2" style="color: #3de7c9">{{ item.number.number[0].toFixed(2) }}</span>
                  <span v-else style="color: #3de7c9"
                        :title="item.number.number[0].toFixed(2)+ ' 元'">{{
                      saleamount(item.number.number[0].toFixed(2))
                    }}</span>
                </li>
              </ul>
            </div>

            <!-- 中间主体 -->
            <div class="center-bd">
              <!--              <bubbleMap />-->
              <div class="center-bd-bg">
                <img src="../../assets/img1/jt.png" style="width:100%;height:100%">
              </div>
              <div class="panel-under"></div>
            </div>
          </div>

          <!-- 右边主体 -->
          <div class="right-box">
            <!--发放情况-->
            <div class="panel">
              <carousel :personnalDistStatiss="personnalDistStatiss"/>
              <div class="panel-under"></div>
            </div>
            <!--右边下角 监管情况统计-->
            <div class="panel" style="height: 570px;">
              <pie2 :supervisedata="deptSuperviseStatiss"/>
              <div class="panel-under"></div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import centerLeft1 from "./components/centerLeft1";
import bar from "./components/Bar";
import myMap from './components/map'
import carousel from './components/carousel'
import capsule from './components/capsule'
// import pie from './components/pie1'
import pie from './components/pie'
import pie2 from './components/pie2'
import bubbleMap from './components/bubble-map'

// 适配flex
import '../../common/flexible.js';

import '@/assets/style1/global.scss'
import '@/assets/style1/base.scss'
// import centerLeft2 from "./centerLeft2";
// import centerRight1 from "./centerRight1";
// import centerRight2 from "./centerRight2";
// import center from "./center";
import bottomLeft from "../visualization/bottomLeft";
import {bigData} from "@/api/report/report";
import {getInfo} from "@/api/login";
import {childlistUse} from "@/api/system/dept";
// import bottomRight from "./bottomRight";
export default {
  data() {
    return {
      loading: true,
      isShow: false,
      open: false,
      city: '',
      cityData: [],
      config: {
        radius: '70%',
        activeRadius: 65,
        digitalFlopStyle: {
          fontSize: 20,
          fill: '#fff'
        },
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ]
      },
      config1: {
        data: [66]
      },
      numberData: [
        /*{
          number: {
            number: [15],
            toFixed: 0,
            content: "{nt} "
          },
          text: "退耕人数（人）"
        },
        {
          number: {
            number: [1144],
            toFixed: 0,
            content: "{nt}"
          },
          text: "退耕地块数（块）"
        },
        {
          number: {
            number: [361],
            toFixed: 2,
            content: "{nt}"
          },
          text: "退耕面积（亩）"
        },
        {
          number: {
            number: [157],
            toFixed: 2,
            content: "{nt}"
          },
          text: "发放金额（元）"
        }*/
      ],
      cropsStatiss: [],//附着物统计
      tqqkStatiss: [],//退耕统计
      deptDistStatiss: [],//数据统计图
      deptSuperviseStatiss: [],//数据统计图
      personnalDistStatiss: [],//发放情况
    };
  },
  components: {
    centerLeft1,
    myMap,
    carousel,
    capsule,
    pie,
    bar,
    bubbleMap,
    pie2,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    bottomLeft,
    // bottomRight
  },
  mounted() {
    this.cancelLoading();
    setInterval(() => {
      this.initData()
    }, 30000);
  },
  created() {
    this.initData();
    getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;
      if (deptCode.length == 4) {//新区
        childlistUse(deptCode).then(response => {
          this.cityData = response.data;
        });
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });
  },
  methods: {
    saleamount(num) {
      return this.formatDecimal(Math.abs(num * 1) / 10000, 1)
    },
    formatDecimal(num, decimal) {
      // num = this.fixeds(num * 1)
      num = num.toString();
      let index = num.indexOf(".");
      if (index !== -1) {
        num = num.substring(0, decimal + index + 1);
      } else {
        num = num.substring(0);
      }
      return parseFloat(num).toFixed(decimal);
    },
    chooseArea() {
      this.open = true;
    },
    cancel() {
      this.open = false;
    },
    submit() {
      this.open = false;
      let deptCode = this.city;
      bigData(deptCode).then(response => {
        let allDeptDistStatis = response.data.allDeptDistStatis;
        this.numberData = [{
          number: {
            number: [allDeptDistStatis.cbfTotalNumber],
            toFixed: 0,
            content: "{nt} "
          },
          text: "退耕人数（户）"
        },
          {
            number: {
              number: [allDeptDistStatis.dkTotalNumber],
              toFixed: 0,
              content: "{nt}"
            },
            text: "退耕地块数"
          },
          {
            number: {
              number: [allDeptDistStatis.gyTotalArea + allDeptDistStatis.jtTotalArea],
              toFixed: 2,
              content: "{nt}"
            },
            text: "退耕面积（亩）"
          },
          {
            number: {
              number: [allDeptDistStatis.budgetTotalPrice],
              toFixed: 2,
              content: "{nt}"
            },
            text: "资金预算（元）"
          },
          {
            number: {
              number: [allDeptDistStatis.distTotalPrice],
              toFixed: 2,
              content: "{nt}"
            },
            text: "发放金额（元）"
          }];

        let tqqkStatiss = [];
        response.data.tqqkStatiss.forEach(item => {
          if (item.cbfzs > 0 || item.cbfzsPercent > 0) {
            tqqkStatiss.push(item);
          }
        })
        this.tqqkStatiss = tqqkStatiss;

        // 附着物
        response.data.cropsStatiss = response.data.cropsStatiss.sort(function (a, b) {		//重点在这里，下面有说明
          return b.area - a.area;				//inNum是要根据某个字段进行排序的字段名，
        })
        let cropsStatiss = [];
        let num = 0;
        let len1 = response.data.cropsStatiss.length;
        if (len1 <= 6) {
          cropsStatiss = response.data.cropsStatiss;
          this.cropsStatiss = cropsStatiss;
        } else {
          for(let i=0;i<5;i++)
          {
            cropsStatiss.push(response.data.cropsStatiss[i]);
            if (num = 5) {
              this.cropsStatiss = cropsStatiss;
            }
          }
        }

        //监管情况统计
        // this.deptDistStatiss = deptDistStatiss;
        let deptSuperviseStatiss = [];
        let i = 0;
        let len = response.data.deptSuperviseStatiss.length;
        response.data.deptSuperviseStatiss.forEach(item => {
          i++;
          if (item.totalNumber > 0) {
            deptSuperviseStatiss.push(item);
            if (len == i) {
              this.deptSuperviseStatiss = deptSuperviseStatiss;
            } else {
              this.deptSuperviseStatiss = deptSuperviseStatiss;
            }
          }
        })

        let personnalDistStatiss=[];
        let ii=0;
        response.data.personnalDistStatiss.forEach(item=>{
          ii++;
          if(ii<10){
            personnalDistStatiss.push(item);
          }
        })
        this.personnalDistStatiss = personnalDistStatiss;
      });
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500);
    },
    changeNumber() {
      this.numberData.forEach((item, index) => {
        item.number.number[0] += ++index;
        item.number = {...item.number};
      });
    },
    initData() {
      let deptCode = this.city;
      bigData(deptCode).then(response => {
        let allDeptDistStatis = response.data.allDeptDistStatis;
        this.numberData = [{
          number: {
            number: [allDeptDistStatis.cbfTotalNumber],
            toFixed: 0,
            content: "{nt} "
          },
          text: "退耕人数（户）"
        },
          {
            number: {
              number: [allDeptDistStatis.dkTotalNumber],
              toFixed: 0,
              content: "{nt}"
            },
            text: "退耕地块数"
          },
          {
            number: {
              number: [allDeptDistStatis.gyTotalArea + allDeptDistStatis.jtTotalArea],
              toFixed: 2,
              content: "{nt}"
            },
            text: "退耕面积（亩）"
          },
          {
            number: {
              number: [allDeptDistStatis.budgetTotalPrice],
              toFixed: 2,
              content: "{nt}"
            },
            text: "资金预算（万元）"
          },
          {
            number: {
              number: [allDeptDistStatis.distTotalPrice],
              toFixed: 2,
              content: "{nt}"
            },
            text: "发放金额（万元）"
          }];
        // 退耕情况
        let tqqkStatiss = [];
        response.data.tqqkStatiss.forEach(item => {
          if (item.cbfzs > 0 || item.cbfzsPercent > 0) {
            tqqkStatiss.push(item);
          }
        })
        this.tqqkStatiss = tqqkStatiss;

        let cropsStatiss = [];
        let num = 0;
        let len1 = response.data.cropsStatiss.length;
        if (len1 <= 6) {
          cropsStatiss = response.data.cropsStatiss;
          this.cropsStatiss = cropsStatiss;
        } else {
          for(let i=0;i<5;i++)
          {
            cropsStatiss.push(response.data.cropsStatiss[i]);
            if (num = 5) {
              this.cropsStatiss = cropsStatiss;
            }
          }
        }
        let deptSuperviseStatiss = [];
        let len = response.data.deptSuperviseStatiss.length;
        let i = 0;
        response.data.deptSuperviseStatiss.forEach(item => {
          i++;
          if (item.totalNumber > 0) {
            deptSuperviseStatiss.push(item);
            if (len == i) {
              this.deptSuperviseStatiss = deptSuperviseStatiss;
            } else {
              this.deptSuperviseStatiss = deptSuperviseStatiss;
            }
          }
        })
        // this.personnalDistStatiss = response.data.personnalDistStatiss;
        let personnalDistStatiss=[];
        let ii=0;
        response.data.personnalDistStatiss.forEach(item=>{
          ii++;
          if(ii<10){
            personnalDistStatiss.push(item);
          }
        })
        this.personnalDistStatiss = personnalDistStatiss;
      });
    }
  }
};
</script>

<style lang="scss">
</style>
